<template>
  <div class="TransactionRecords">
    <div class="searchBox">
      <el-radio-group
        v-model="type"
        @change="search"
        size="small"
        fill="#7b94d8"
      >
        <el-radio-button label="1">充值记录</el-radio-button>
        <el-radio-button label="3">平台赠送扣除记录</el-radio-button>
        <el-radio-button label="2">提现记录</el-radio-button>
      </el-radio-group>
      <div class="right">
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <el-button
          style="margin-left: 10px"
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
        <!-- <el-button icon="el-icon-paperclip" @click="exportExcel" size="small"
          >导出EXCEL</el-button
        > -->
      </div>
    </div>
    <div class="typeBox" v-if="type == 1">
      <div class="card">
        <h3>
          <span class="point"></span>
          总充值金额
        </h3>
        <h1>
          <i class="iconfont">&#xe65c;</i>
          {{ rechargeTotal ? rechargeTotal : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          金币充值金额
        </h3>
        <h1>
          <i class="iconfont">&#xe6c8;</i>
          {{ goldPay ? goldPay : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          VIP充值金额
        </h3>
        <h1>
          <i class="iconfont">&#xe64c;</i>
          {{ vipPay ? vipPay : 0 }}
        </h1>
      </div>
    </div>
    <div class="typeBox" v-if="type == 2">
      <div class="card">
        <h3>
          <span class="point"></span>
          提现总消耗宝石
        </h3>
        <h1>
          <i class="iconfont">&#xe65b;</i>
          {{ gem ? gem : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          总提现金额
        </h3>
        <h1>
          <i class="iconfont">&#xe688;</i>
          {{ money ? money : 0 }}
        </h1>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
      :show-summary="showSummary"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <!-- 充值 -->
      <el-table-column
        v-if="type == 1"
        key="1"
        prop="pay_time"
        label="充值时间"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 1"
        key="2"
        prop="pay_amount"
        label="充值金额"
      >
      </el-table-column>
      <el-table-column v-if="type == 1" key="3" prop="type" label="充值道具">
      </el-table-column>
      <el-table-column
        v-if="type == 1"
        key="4"
        prop="matching_duration"
        label="道具类别"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 1"
        key="5"
        prop="order_status"
        label="充值状态"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 1"
        key="6"
        prop="order_number"
        label="订单号"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 1"
        key="7"
        prop="pay_order_number"
        label="第三方账号"
      >
      </el-table-column>
      <!-- 提现 -->
      <el-table-column
        v-if="type == 2"
        key="8"
        prop="audit_time"
        label="兑换时间"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 2"
        key="9"
        prop="cost_diamond"
        label="消耗宝石"
      >
      </el-table-column>
      <el-table-column v-if="type == 2" key="10" prop="amount" label="提现金额">
      </el-table-column>
      <!-- 平台 -->
      <el-table-column
        v-if="type == 3"
        key="11"
        prop="finance_approve_time"
        label="赠送时间"
      >
      </el-table-column>
      <el-table-column v-if="type == 3" key="12" prop="type" label="赠送类型">
        <template slot-scope="scope">
          {{
            scope.row.type == "1"
              ? "金币"
              : scope.row.type == "2"
              ? "宝石"
              : "Vip"
          }}
        </template>
      </el-table-column>
      <el-table-column v-if="type == 3" key="13" prop="number" label="数量">
      </el-table-column>
      <el-table-column
        v-if="type == 3"
        key="14"
        prop="operation_type"
        label="操作类型"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 3"
        key="15"
        prop="apply_reason"
        label="赠送原因"
      >
      </el-table-column>
      <el-table-column
        v-if="type == 3"
        key="16"
        prop="apply_account"
        label="申请人"
      >
      </el-table-column>
    </el-table>
    <br />
    <pagination
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { userBusinessRecord, userDel_api } from "@/api/UserManagement";
import moment from "moment";
export default {
  components: { Pagination },
  props: ["userId"],
  data() {
    return {
      type: "1",
      timeArr: [],
      startDate: "",
      endDate: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      addLoading: false,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //总览
      rechargeTotal: 0,
      goldPay: 0,
      vipPay: 0,
      gem: 0,
      money: 0,
    };
  },
  methods: {
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    search() {
      this.page = 1;
      this.getList();
    },
    exportExcel() {},

    // 充值提现
    async getuserBusinessRecord() {
      if (this.userId) {
        const res = await userBusinessRecord({
          user_id: this.userId,
          startTime: this.startDate,
          endTime: this.endDate,
          opera_type: this.type,
          page: this.page,
          pageSize: this.pageSize,
        });
        if (res.code == 0) {
          this.total = parseInt(res.data.count);
          this.tableData = res.data.list;
          if (this.type == 1) {
            this.tableData.forEach((item) => {
              item.type = item.type == 1 ? "金币" : "VIP";
              item.order_status = item.order_status == 1 ? "已支付" : "未支付";
              item.pay_time = moment(item.pay_time * 1000).format(
                "YYYY-MM-DD hh:mm:ss"
              );
            });
            this.rechargeTotal = res.data.total.total;
            this.goldPay = res.data.total.goldPay;
            this.vipPay = res.data.total.vipPay;
          }
          if (this.type == 2) {
            this.tableData.forEach((item) => {
              item.audit_time = moment(item.audit_time * 1000).format(
                "YYYY-MM-DD hh:mm:ss"
              );
            });
            this.gem = res.data.total.gold;
            this.money = res.data.total.total;
          }
        }
      }
    },
    // 平台赠送扣除记录
    async getuserDel_api() {
      if (this.userId) {
        let { code, data } = await userDel_api({
          user_id: this.userId,
          startTime: this.startDate,
          endTime: this.endDate,
          page: this.page,
          pageSize: this.pageSize,
        });
        if (code == 0) {
          console.log(data, "65456");
          this.tableData = data.list;
          this.total = parseInt(data.count);
        }
      }
    },
    getList() {
      if (this.type != "3") {
        this.getuserBusinessRecord();
      } else {
        this.getuserDel_api();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.TransactionRecords {
  .searchBox {
    display: flex;
    justify-content: space-between;
  }
  .typeBox {
    display: flex;
    .card {
      height: 120px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      width: 300px;
      margin-top: 20px;
      margin-right: 20px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
    }
  }
}
</style>